@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">材料入库</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('inventory.store-in') }}">
                        @csrf
                        <div class="mb-3">
                            <label for="material_id" class="form-label">材料</label>
                            <select class="form-select select2 @error('material_id') is-invalid @enderror" 
                                id="material_id" name="material_id" required>
                                <option value="">请选择材料</option>
                                @foreach($materials as $material)
                                    <option value="{{ $material->id }}" 
                                        {{ old('material_id') == $material->id ? 'selected' : '' }}
                                        data-quantity="{{ $material->quantity }}"
                                        data-unit="{{ $material->unit }}">
                                        {{ $material->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('material_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="quantity" class="form-label">入库数量</label>
                            <div class="input-group">
                                <input type="number" step="0.01" min="0.01" 
                                    class="form-control @error('quantity') is-invalid @enderror" 
                                    id="quantity" name="quantity" value="{{ old('quantity') }}" required>
                                <span class="input-group-text" id="unit">单位</span>
                            </div>
                            <div class="form-text">当前库存：<span id="current-quantity">0</span></div>
                            @error('quantity')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="remark" class="form-label">备注</label>
                            <textarea class="form-control @error('remark') is-invalid @enderror" 
                                id="remark" name="remark" rows="3">{{ old('remark') }}</textarea>
                            @error('remark')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">确认入库</button>
                            <a href="{{ route('inventory.index') }}" class="btn btn-secondary">返回</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // 初始化 Select2
    $('.select2').select2({
        theme: 'bootstrap-5',
        language: 'zh-CN',
        placeholder: '请选择材料',
        allowClear: true,
        width: '100%'
    });

    // 监听材料选择变化
    $('#material_id').on('change', function() {
        var selectedOption = $(this).find('option:selected');
        var quantity = selectedOption.data('quantity');
        var unit = selectedOption.data('unit');
        
        // 更新当前库存显示
        $('#current-quantity').text(quantity);
        // 更新单位显示
        $('#unit').text(unit);
    });

    // 如果有默认选中的材料，触发一次 change 事件
    if ($('#material_id').val()) {
        $('#material_id').trigger('change');
    }
});
</script>
@endpush
@endsection 